<template>
	<view class="wrap">
	<view class="login-wrap">
        <!-- 人 -->
        <view class="cu-form-group margin-top">
            <view class="title">请先选我</view>
            <picker @change="popPickerChange" :value="index" :range="popArray">
                <view class="picker">
                    {{popArray[index]}}
                </view>
            </picker>
        </view>
        <!-- <input
        type="text"
        class="post.username a"
        placeholder="账号"
        v-model="post.username"
        > -->
        <!-- 账号 -->
        <view class="cu-form-group margin-top">
            <view class="title">选择账号</view>
            <picker @change="namePickerChange" :value="index1" :range="nameArray">
                <view class="picker">
                    {{nameArray[index1]}}
                </view>
            </picker>
        </view>
        <view class="cu-form-group margin-top">
            <view class="title">密码</view>
            <input placeholder="请输入密码"
            type="password"
            v-model="post.password"
            ></input>
        </view>
        <!-- 手机或电脑 -->
        <radio-group class="block" @change="radioChange">
            <view class="cu-form-group margin-top">
                <view class="title">pc或mobile</view>
                <label class="radio"><radio value="pc" name='radio' checked="true"/>pc</label>
                <label class="radio twoRadio"><radio value="mobile" name='radio'/>mobile</label>
            </view>
        </radio-group>
        <!-- 类型 -->
        <view class="cu-form-group margin-top">
            <view class="title">选择系统</view>
            <picker @change="bindPickerChange" :value="index2" :range="array">
                <view class="picker">
                    {{array[index2]}}
                </view>
            </picker>
        </view>
        <view class="register">
            <text class="zhuce" @click="register"> 立即注册 </text>
            <!-- <text class="mima"> 忘记密码 </text> -->
        </view>
        <view class="btn">
            <button type="primary" class="login_btn" @click="login">登录</button>
        </view>
    </view>
    <!-- 登录提示框 -->
    <view class="cu-modal" :class="modalName==true?'show':''">
        <view class="cu-dialog">
            <view class="cu-bar bg-white justify-end">
                <view class="content">提示</view>
                <view class="action" @tap="hideModal">
                    <text class="cuIcon-close text-red"></text>
                </view>
            </view>
            <view class="padding-xl">
                请先选择账号
            </view>
        </view>
    </view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
                popArray: ['A','B','C','D','E'],
                nameArray:[],
                passArray:[],
				modalName:false,
				array: ['专利成果转化系统', '运营平台服务', '专利代理机构服务', '运营平台服务', '推广人系统'],
				index:0,
				index1:0,
				index2:0,
				list: [{
					title: "aa"
				}],
				post: {
					content: null,
					talk_id: null,
					username: null, //17683851211
					password: null, //851211
					sertype: '0',
					toMemberId: 0,
					token: null,
					port:'pc'
				},
                userData: [],
                memberIds:[],
                loginData:[],
                key:null,
                toekn:null,
                member_id:null
			};
		},
		methods: {
            popPickerChange(value) {
                this.index = value.detail.value
                let data=[
                {value:0,sign:'A',data:[{tel:'13260596155',member_id:'5010'},{tel:'15902779999',member_id:'5011'},{tel:'15549485375',member_id:'5012'},{tel:'17121571006',member_id:'5013'}]},
                {value:1,sign:'B',data:[{tel:'13419586637',member_id:'5036'},{tel:'15902778080',member_id:'5018'},{tel:'15902773333',member_id:'5042'},{tel:'13812345678',member_id:'5021'}]},
                {value:2,sign:'C',data:[{tel:'15902771111',member_id:'5022'},{tel:'15827802074',member_id:'5023'},{tel:'18871180249',member_id:'5024'},{tel:'13477099211',member_id:'5026'}]},
                {value:3,sign:'D',data:[{tel:'13477061212',member_id:'5027'},{tel:'18327887777',member_id:'5028'},{tel:'13477061245',member_id:'5029'},{tel:'17485963254',member_id:'5030'}]},
                {value:3,sign:'D',data:[{tel:'17485963212',member_id:'5031'},{tel:'17485963255',member_id:'5032'},{tel:'15748596321',member_id:'5033'},{tel:'18327777102',member_id:'5034'}]},
                ];
                let nameArray=data[value.detail.value].data;
                let a=[]
                let memberIds=[];
                nameArray.map(v=>{
                a.push(v.tel)
                memberIds.push(v.member_id)
                })
                this.nameArray=a;
                this.memberIds = memberIds
                this.post.username = this.nameArray[0]
                this.post.password = this.nameArray[0].substring(this.nameArray[0].length-6)
            },
            namePickerChange(value) {
                this.index1 = value.detail.value
                let val = value.detail.value
                let info = this.nameArray[val].substring(this.nameArray[val].length-6)
                this.post.username = this.nameArray[val]
                this.post.password = info
			},
			// 显示弹框
			showModal(){
				this.modalName = true
			},
			// 隐藏弹框
			hideModal(){
				this.modalName = false
            },
            register(){
                console.log(11)
                uni.navigateTo({
                    url: '../login/register'
                })
            },
			// pc或mobile
			radioChange(value){
				this.post.port = value.detail.value
			},
			// sertype
			bindPickerChange(value) {
				this.index2 = value.detail.value
				this.post.sertype = value.detail.value
			},
			/*登录*/
            login() {
                this.initialize()
                if(this.userData != null || this.loginData != null){
                    uni.navigateTo({
                        url: `/pages/zhuanli/zhuanli`
                    })
                    uni.showToast({
                        title: '自动登录上次账号',
                        duration: 2000
                    });
                }else{
                if (this.post.port !== null &&this.post.username!=null &&this.post.password!=null ){
                    let option = {
                        h_url: "http://v3-h.xgwl.net.cn",
                        a_url: "http://v3-a.xgwl.net.cn",
                        e_url: "v3-e.xgwl.net.cn",
                        sertype: '0',
                        port: this.post.port,
                        onLoginSuccess: (data) => {
                            this.userData = data.userData;
                            this.$store.commit('setUserData',this.userData)
                            this.post.token = data.token
                            uni.navigateTo({
                                url: `/pages/zhuanli/zhuanli`
                            })
                            // 存储
                            let Data = JSON.stringify(this.memberIds)
                            sessionStorage.setItem('memberIds',Data)
                            sessionStorage.setItem('userData',JSON.stringify(this.userData))

                        },
                        onCloseCallback: () => {
                            let isLogin = confirm("你要继续登录吗？")
                            if(isLogin == false){
                            sessionStorage.clear()
                            window.location.hash = '#/pages/login/login'
                            }
                            return isLogin;
                        },
                    }
					this.$Socket.action('setConfig',{option:option},()=>{},()=>{})
                    var xml = new XMLHttpRequest();
                    xml.open("post", "http://v3-a.xgwl.net.cn" + "/cPasswordGetKey");
                    xml.send(JSON.stringify(this.post));
                    xml.onreadystatechange = () => {
                        if (xml.readyState == 4) {
                        let data = JSON.parse(xml.responseText);
                        // console.log(data,'xx')
                        xml = new XMLHttpRequest();
                        xml.open("post", "http://v3-h.xgwl.net.cn" + "/login");
                        xml.send(JSON.stringify(data.data));
                        xml.onreadystatechange = () => {
                            if (xml.readyState == 4) {
                            data = JSON.parse(xml.responseText);
                            // console.log(data,'xxx')
                            this.key = data.data.key;
                            this.token = data.data.token;
                            this.member_id = data.data.member_id;
                            this.$Socket.action('quickConnect',{
                                key:this.key,
                                token:this.token,
                                member_id:this.member_id,
                                port:this.post.port,
                            },()=>{},()=>{})
                            }
                        };
                        }
                    };
                }else{
                    this.showModal()
                }
                }
            },
            // 取浏览器内数据
            initialize(){
                this.userData = JSON.parse(sessionStorage.getItem('userData'))
                this.loginData = JSON.parse(sessionStorage.getItem('loginData'))
            }
		},
		onLoad(){
			this.initialize()
		}
	}
</script>
<style lang="less">
.wrap {
  height: 100vh;
  display: flex;
  justify-content: center;

  background-color: #fff;

  .login-wrap {
    margin-top: 30%;
    width: 80%;
    .a {
      margin-bottom: 20px;
    }
    .btn {
      display: flex;
      justify-content: center;

      .login_btn {
        width: 650px;
        border-radius: 35px;
      }
    }
    .register {
      display: flex;
      justify-content: space-between;
      margin-bottom: 30px;
      color: #0081ff;
      margin-top: 40rpx;
      .zhuce {
        font-size: 12px;
      }

      .mima {
        font-size: 12px;
      }
    }
  }
}
.cu-form-group {
  border-bottom: 1px solid #0081ff;
}
.cu-form-group + .cu-form-group {
  border-top: 0px;
}
.twoRadio {
  margin-left: 40rpx;
}
.pcMoble {
  border-bottom: 1px solid #0081ff;
  width: 100%;
  height: 70rpx;
  margin-top: 20rpx;
}
.serStyle {
  margin-top: 20rpx;
  height: 64rpx;
  border-bottom: 1px solid #0081ff;
}
.serStyle-all {
  text-align: center;
  font-size: 30rpx;
}
</style>
